<template>
    <div class="lucky-wheel">
        <div class="bg" @transitionend="transitionend" :style="{transform: 'rotate(' + rotateAngle + 'deg)', transition: rotateTransition}"></div>
        <div class="point" @click="start"></div>
    </div>
</template>

<script>
export default {
  props: {
    rewardFun: {
      type: Function,
      default: () => {
        return new Promise(resolve => {
          resolve(2)
        })
      }
    }
  },
  data () {
    return {
      count: 6, // 奖品个数
      rotating: false,
      rotateTransition: '',
      rotateAngle: 0,
      awardCount: 0
    }
  },
  methods: {
    async start () { // 这里是点击函数
      if (this.rotating) return
      this.rotating = true
      try {
        let index = await this.rewardFun()
        this.awardCount++
        this.rotateTransition = `transform ${this.count}s ease-in-out`
        console.log('index', index, this.rotateAngle)
        setTimeout(() => {
          this.rotateAngle = this.count * 360 * this.awardCount - (360 / this.count) * index
          console.log(this.rotateAngle)
        }, 10)
      } catch (error) {
        this.rotating = false
      }
    },
    transitionend () {
      if (this.rotating) {
        this.rotating = false
        this.$emit('end')
        console.log('end')
      }
    }
  },
  mounted () {
    // this.start()
  }
}
</script>

<style scoped lang="scss">
.lucky-wheel{
    width: 515px;
    height: 515px;
    position: relative;
    .bg{
        z-index:10;
        position: absolute;
        height: 100%;
        width: 100%;
        top:0;
        left: 0;
        background: url('~@/assets/zp.png') no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    .point{
        z-index:20;
        position: absolute;
        left:191px;
        top:160px;
        width: 144px;
        height: 165px;
        background: url('~@/assets/btn.png') no-repeat;
        background-size: 100% 100%;
    }
}
</style>
